<!DOCTYPE html>
<html>
<head>
    <title>Which pony is best pony?</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/static/scripts/angular.js"></script>
    <script type="text/javascript" src="/static/scripts/angular-resource.js"></script>
    <script type="text/javascript" src="/static/scripts/jquery-2.0.3.js"></script>

    <!--template1
    <script type="text/javascript" src="/static/scripts/pony1.js"></script>
    -->

    <!--template2
    <script type="text/javascript" src="/static/scripts/pony2.js"></script>
    -->

    <!--<script id="jquery" src="/classpath/jquery.js" type="text/javascript"></script>-->

    <!--template3
    <script data-lift="NgPonyService"></script>
    <script data-lift="Angular"></script>
    <script type="text/javascript" src="/static/scripts/liftproxy.js"></script>
    <script type="text/javascript" src="/static/scripts/pony3.js"></script>
    -->

</head>
<body>
    <div class="container" ng-app="pony" ng-controller="PonyCtrl">
        <h1>Which pony is best Pony?</h1>


        <button ng-click="onClick()">Ask the server</button>
        <div ng-show="isRevealed">
            <p class="lead">{{pony.name}} is best pony!</p>
            <img ng-src="{{pony.imageUrl}}" ng-alt="{{pony.name}}"/>
        </div>

    </div>

</body>
</html>